<template>
  <div class="gy-wrapper">
    <!-- 登录 -->
    <div class="log" v-show="log">
      <div class="logo">
        <img src="@/assets/logo/2019pILfAg7Avr1567732916.png" alt="" />
      </div>
      <div class="login">
        <!-- 登录 -->
        <van-form @submit="passWordLogin" v-show="login">
          <van-field
            v-model="mobile"
            name="用户名"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="footer">
            <span class="callBack" @click="callBackShow">找回密码</span>
            <span class="regsiter" @click="registerShow">注册/验证码登录</span>
          </div>
          <div style="margin: 16px">
            <van-button round block type="warning" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
        <!-- 注册登录 -->
        <van-form @submit="codeLogin" v-show="register">
          <van-field
            v-model="mobile"
            name="用户名"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写用户名' }]"
          >
            <template #button>
              <span class="number" @click="send('login')">获取验证码</span>
            </template>
          </van-field>
          <van-field
            v-model="sendInfo"
            type="text"
            name="密码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="footer">
            <span class="callBacks">*未注册的手机号将会自动注册</span>
            <span class="regsiter" @click="passWordShow">使用密码登录</span>
          </div>
          <div style="margin: 16px">
            <van-button round block type="warning" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <!-- 设置密码 -->
    <div class="setpass" v-show="setPasswordStatus">
      <p>
        设置密码
        <span class="jump" @click="jump">跳过</span>
      </p>
      <van-form @submit="setpassword">
        <!-- @submit="onSubmit" -->
        <van-field
          v-model="password"
          name="用户名"
          placeholder="请设置登录密码"
          :rules="[{ required: true, message: '请设置登录密码' }]"
        />
        <van-field
          v-model="onepassword"
          name="密码"
          placeholder="请再次输入密码"
          :rules="[{ required: true, message: '请再次输入密码' }]"
        />
        <div class="determine" style="margin: 16px">
          <van-button round block type="warning" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 找回密码 -->
    <div class="callBackPass" v-show="callBackPass">
      <p>
        <span class="back iconfont" @click='back'>&#xe672;</span>
        <span class="text">找回密码</span>
        </p>
      <van-form @submit="callBackPassWord">
        <van-field
          v-model="mobile"
          name="用户名"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写用户名' }]"
        >
          <template #button>
            <span class="number" @click="send('getPassword')">获取验证码</span>
          </template>
        </van-field>
        <van-field
          v-model="password"
          type="text"
          name="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="sendInfo"
          type="text"
          name="密码"
          placeholder="请输入短信验证码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="warning" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import {
  gy_codeInfo,
  gy_codeLogin,
  gy_setPassWord,
  gy_passWordLogin,
} from "@/utils/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      register: false,
      login: true,
      log: true,
      username: "",
      password: "",
      onepassword: "",
      mobile: "",
      sendInfo: "",
      setPasswordStatus: false,
      callBackPass: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 发送短信
    async send(data) {
      let obj = { mobile: this.mobile, sms_type: data };
      const res = await gy_codeInfo(obj);
    },
    // 验证码登录
    async codeLogin() {
      let obj = {
        mobile: this.mobile,
        sms_code: this.sendInfo,
        type: 2,
        client: 1,
      };
      const res = await gy_codeLogin(obj);
      console.log(res);
      if (res.is_new == 1) {
        this.setPasswordStatus = true;
        this.log = false;
      } else {
        this.logto(res)
      }
    },
    // 设置密码
    async setpassword() {
      if (this.password !== this.onepassword) {
        alert("两次密码不一致");
        return false;
      } else {
        let obj = {
          mobile: this.mobile,
          password: this.password,
          sms_code: this.sendInfo,
        };
        const res = await gy_setPassWord(obj);
        this.logto(res)
      }
    },
    // 重新设置密码
    async callBackPassWord() {
      let obj = {
        mobile: this.mobile,
        password: this.password,
        sms_code: this.sendInfo,
      };
      const res = await gy_setPassWord(obj);
      console.log(res);
      if (res) {
        this.log = true;
        this.callBackPass = false;
        if (res) {
          this.log = true;
          this.callBackPass = false;
        }
      }
    },
    // 密码登录
    async passWordLogin(values) {
      let obj = {
        mobile: this.mobile,
        password: this.password,
        type: 1,
        client: 1,
      };
      const res = await gy_codeLogin(obj);
      this.$toast.success('登录成功');
      this.logto(res)
    },
    // regiserShow
    registerShow() {
      this.login = false;
      this.register = true;
    },
    logto(res){
      localStorage.setItem("adminToken", res.remember_token);
        localStorage.setItem("user", JSON.stringify(res));
        this.$router.push("/Myhome");
    },
    passWordShow() {
      this.login = true;
      this.register = false;
    },
    jump() {
      this.$router.push("/Myhome");
    },
    callBackShow() {
      this.callBackPass = true;
      this.log = false;
    },
    back(){
      this.callBackPass = false;
      this.log = true;
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../../assets/css/index.scss";
.gy-wrapper {
  width: 100%;
  height: 100vh;
}
.logo {
  width: 246px;
  height: 52px;
  margin: 60px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
// 登录
.login {
  padding: 20px;
}
.footer {
  font-size: 12px;
  margin: 10px;
  color: #999;
  margin-bottom: 60px;
}
// 验证码登录
.callBack {
  margin-right: 150px;
}
.callBacks {
  margin-right: 60px;
}
.number {
  font-size: 12px;
  color: #eb6100;
}
// 设置密码
.setpass > p {
  text-align: center;
}
.determine {
  margin-top: 60px !important;
}
.jump {
  margin-left: 150px;
  font-size: 16px;
}
.callBackPass > p {
  // text-align: center;
  margin: 20px 0;
  .back{
    margin-right: 100px;
    margin-left: 20px;
    font-size: 30px;
  }
}
</style>